$(function () {
    localStorage.clear();
    getComputedData();
    setInterval(() => {
        getComputedData()
    }, 1000 * 30);
    // $('.kerqitiClass').on('click', function () {

    // });
    $('.popupClose5').on('click', function () {
        $('.popupClose5').css('display', 'none');
        $('.popup5').animate({ width: '3px' }, 400, function () {
            $('.popup5').animate({ height: 0 }, 400);
        });
        setTimeout(summaryHide5, 800);
    });

    function summaryHide5() {
        localStorage.clear();
        clearInterval(timekerqiti)
        $('.filterbg5').hide();
        $('.popup5').hide();
        $('.popup5').width(0);
    };
})

function kerqitiClass() {
    var clickIndex = localStorage.getItem("clickIndex");
    if (clickIndex == 5) {
        return
    }
    $('.popupClose' + clickIndex).css('display', 'none');
    $('.popup' + clickIndex).animate({ width: '3px' }, 400, function () {
        $('.popup' + clickIndex).animate({ height: 0 }, 400);
    });
    setTimeout(function () {
        $('.filterbg' + clickIndex).hide();
        $('.popup' + clickIndex).hide();
        $('.popup' + clickIndex).width(0);
        clearInterval(timekerqiti)
        localStorage.setItem("clickIndex", "5");
    }, 400);

    $('.filterbg5').show();
    $('.popup5').show();
    $('.popup5').width('3px');
    $('.popup5').animate({ height: '56%' }, 400, function () {
        $('.popup5').animate({ width: '53%' }, 400);
    });
    setTimeout(summaryShow5, 800);
}
var timekerqiti
function summaryShow5() {
    getkerqitiCurrentData()
    timekerqiti = setInterval(() => {
        getkerqitiCurrentData()
    }, 1000);
    getdiakerqiChartData()
    $('.popupClose5').css('display', 'block');
};

function getComputedData() {
    $.ajax(baseUrl + ":8091/dev-device-instance/getDeviceDataInfo", {
        method: 'GET',
        data: {
            id: "JCKRQT",
        },
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            if (result.code == 200) {
                getsysJCKRQTData(result.data.list.records[0])

            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function getsysJCKRQTData(val) {
    var data = {
        tag1: val.Tag1,
        tag2: val.Tag2,
        tag3: val.Tag3,
        tag4: val.Tag4,
        tag5: val.Tag5,
        tag6: val.Tag6,
        tag7: val.Tag7,
        tag8: val.Tag8,
        tag9: val.Tag9,
        tag10: val.Tag10,
        tag11: val.Tag11,
        tag12: val.Tag12,
        tag13: val.Tag14,
        tag14: val.Tag14,
        tag15: val.Tag15,
        tag16: val.Tag16,
        tag17: val.Tag17,
        tag18: val.Tag18,
        tag19: val.Tag19,
        tag20: val.Tag20,
        tag21: val.Tag21,
        tag22: val.Tag22,
        tag23: val.Tag23,
        tag24: val.Tag24,
        tag25: val.Tag25,
        tag26: val.Tag26,
        tag27: val.Tag27,
        tag28: val.Tag28,
        tag29: val.Tag29,
        tag30: val.Tag30,
        tag31: val.Tag31,
        tag32: val.Tag32,
        tag33: val.Tag33,
        tag34: val.Tag34,
        tag35: val.Tag35,
        tag36: val.Tag36,
        tag37: val.Tag37,
        tag38: val.Tag38,
        tag39: val.Tag39,
        tag40: val.Tag40,
        tag41: val.Tag41,
        tag42: val.Tag42,
    }
    $.ajax("http://192.168.15.10:8080/system/combustible/add", {
        method: 'post',
        data: JSON.stringify(data),
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
        },
        error: function (err) {
            console.log(err);
        }
    })
}

function getkerqitiCurrentData() {
    $.ajax("http://192.168.15.10:8080/system/combustible/getCurrentDataInfo", {
        method: 'get',
        data: {},
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            var html1 = ""
            var html2 = ""
            var html3 = ""
            var html4 = ""
            if (result.code == 200) {

                for (let i = 1; i < 15; i++) {
                    html1 += '<div style="padding-top: 20px;display: flex;">'
                    html1 += '<div style="width:260px;float: left;">' + i + '#罐可燃气体</div>';
                    if (i >= 11) {
                        html1 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag3" + (i - 11)] + ''
                    } else {
                        html1 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag2" + (i - 1)] + ''
                    }
                    html1 += '</div></div>'
                }

                for (let i = 1; i < 6; i++) {
                    html2 += '<div style="padding-top: 26px;display: flex;">'
                    html2 += '<div style="width:260px;float: left;">老泵棚' + i + '可燃气体</div>';
                    html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag1" + (i + 1)] + ''
                    html2 += '</div></div>'
                }
                html2 += '<div style="padding-top: 30px;display: flex;">'
                html2 += '<div style="width:260px;float: left;">新泵棚1可燃气体</div>';
                html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag17"] + ''
                html2 += '</div></div>'
                html2 += '<div style="padding-top: 30px;display: flex;">'
                html2 += '<div style="width:260px;float: left;">新泵棚2可燃气体</div>';
                html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag18"] + ''
                html2 += '</div></div>'
                html2 += '<div style="padding-top: 30px;display: flex;">'
                html2 += '<div style="width:260px;float: left;">污油泵房可燃气体</div>';
                html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag19"] + ''
                html2 += '</div></div>'
                html2 += '<div style="padding-top: 30px;display: flex;">'
                html2 += '<div style="width:260px;float: left;">高架罐1可燃气体</div>';
                html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag34"] + ''
                html2 += '</div></div>'
                html2 += '<div style="padding-top: 30px;display: flex;">'
                html2 += '<div style="width:260px;float: left;">高架罐2可燃气体</div>';
                html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag35"] + ''
                html2 += '</div></div>'
                html2 += '<div style="padding-top: 30px;display: flex;">'
                html2 += '<div style="width:260px;float: left;">1号埋地集油罐可燃气体</div>';
                html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag36"] + ''
                html2 += '</div></div>'
                html2 += '<div style="padding-top: 30px;display: flex;">'
                html2 += '<div style="width:260px;float: left;">2号埋地集油罐可燃气体</div>';
                html2 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag37"] + ''
                html2 += '</div></div>'
                //新泵棚2可燃气体
                //高架罐1可燃气体 
                document.getElementById("kerqitidiaLogId").innerHTML = html1
                document.getElementById("kerqitidiaLogId2").innerHTML = html2


                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">桶装间1可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag39"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">桶装间2可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag40"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">1号埋地罐可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag41"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">2号埋地罐可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag42"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">19号泵附近可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag38"] + ''
                html3 += '</div></div>'


                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">罐6罐3管带中央可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag2"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">罐5罐2管带中央可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag3"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">罐4罐1管带中央可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag4"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">罐4罐1集水坑附近可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag5"] + ''
                html3 += '</div></div>'
                //罐4罐1集水坑附近可燃气体
                //截油沟附近可燃气体
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">截油沟附近可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag6"] + ''
                html3 += '</div></div>'
                html3 += '<div style="padding-top: 30px;display: flex;">'
                html3 += '<div style="width:260px;float: left;">罐10罐7集水坑附近可燃气体</div>';
                html3 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag7"] + ''
                html3 += '</div></div>'
                document.getElementById("kerqitidiaLogId4").innerHTML = html3

                html4 += '<div style="padding-top: 30px;display: flex;">'
                html4 += '<div style="width:260px;float: left;">罐10罐7管带中央可燃气体</div>';
                html4 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag8"] + ''
                html4 += '</div></div>'
                html4 += '<div style="padding-top: 30px;display: flex;">'
                html4 += '<div style="width:260px;float: left;">罐11罐8管带中央可燃气体</div>';
                html4 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag9"] + ''
                html4 += '</div></div>'
                //罐11罐8管带中央可燃气体
                // /罐12罐9管带中央可燃气体
                html4 += '<div style="padding-top: 30px;display: flex;">'
                html4 += '<div style="width:260px;float: left;">罐12罐9管带中央可燃气体</div>';
                html4 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag10"] + ''
                html4 += '</div></div>'
                //罐14防火堤排污阀组附近可燃气体
                html4 += '<div style="padding-top: 30px;display: flex;">'
                html4 += '<div style="width:280px;float: left;">罐14防火堤排污阀组附近可燃气体</div>';
                html4 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag11"] + ''
                html4 += '</div></div>'
                html4 += '<div style="padding-top: 30px;display: flex;">'
                html4 += '<div style="width:260px;float: left;">罐6罐3中间集水坑附近可燃气体</div>';
                html4 += '<div style="border: 1px solid #fff;float: right;margin-right: 20px; width: 100px;">' + result.data["tag1"] + ''
                html4 += '</div></div>'
                document.getElementById("kerqitidiaLogId3").innerHTML = html4
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}


var chartsNumArr = []
function getdiakerqiChartData() {
    var chartDom = document.getElementById('kerqitidiaChartsId');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item',
            showDelay: 20,
            transitionDuration: 0.4
        },
        color: [ 'red','aqua'],
        legend: {
            top: '5%',
            left: 'center',


            orient: 'vertical',
            textStyle: {
                color: "#fff",
                fontSize: 22
            },
        },

        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '60%'],

                label: {
                    show: false,
                    position: 'center',
                    normal: {
                        show: true,
                        position: 'center',
                        formatter: function (params) {
                           
                            var str;
                            chartsNumArr.push(params.value)
                            const result = Array.from(new Set(chartsNumArr))
                            for (let i = 0; i < result.length; i++) {
                                str = result[1]+ "/"+result[0]
                            }
                            return str
                        },
                        textStyle: {
                            fontSize: 20,
                            // color: '#39CCCC'
                        }
                    }
                },

                labelLine: {
                    show: false
                },
                data: [
                    { value: 0, name: '异常（0）' },
                    { value: 42, name: '正常（42）' },
                    
                ]
            }
        ]
    };

    option && myChart.setOption(option);
}